<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿推荐 - WishSocial</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #e0e7ff;
            --secondary: #ec4899;
            --secondary-light: #fee2e2;
            --light-gray: #f3f4f6;
            --dark-gray: #1f2937;
            --text-gray: #6b7280;
            --border-color: #e5e7eb;
        }
        
        body {
            background-color: #fafafa;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark-gray);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 头部样式 */
        .site-header {
            background-color: white;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 1.8rem;
        }
        
        .search-container {
            position: relative;
            max-width: 500px;
            width: 100%;
        }
        
        .search-input {
            background-color: var(--light-gray);
            border: none;
            padding: 0.6rem 1rem 0.6rem 2.5rem;
            border-radius: 8px;
            width: 100%;
        }
        
        .search-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-gray);
        }
        
        .nav-links .nav-link {
            color: var(--dark-gray);
            font-weight: 500;
            margin-left: 1.5rem;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .nav-links .nav-link:hover,
        .nav-links .nav-link.active {
            color: var(--primary);
        }
        
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            cursor: pointer;
        }
        
        /* 主体内容 */
        .main-content {
            padding: 2rem 0;
        }
        
        .section-header {
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--dark-gray);
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0.4rem 0.8rem;
            color: var(--text-gray);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 布局切换容器 */
        .wish-container {
            transition: all 0.3s ease;
        }
        
        /* 卡片式布局 */
        .wish-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        /* 列表式布局 */
        .wish-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        /* 紧凑式布局 */
        .wish-compact {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        /* 许愿卡片基础样式 */
        .wish-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            color: var(--dark-gray);
        }
        
        .wish-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            color: var(--dark-gray);
        }
        
        /* 图片容器样式 */
        .wish-images {
            position: relative;
        }
        
        .wish-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .no-image {
            width: 100%;
            height: 180px;
            background-color: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-gray);
        }
        
        .no-image i {
            font-size: 3rem;
        }
        
        .multiple-images {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background-color: rgba(0,0,0,0.5);
            color: white;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
        
        /* 卡片内容样式 */
        .wish-content {
            padding: 1rem;
        }
        
        .wish-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        
        .wish-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--text-gray);
            margin-bottom: 0.75rem;
        }
        
        .wish-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            color: var(--dark-gray);
        }
        
        .wish-stats {
            display: flex;
            gap: 1rem;
            font-size: 0.85rem;
            color: var(--text-gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 列表式布局特殊样式 */
        .wish-list .wish-card {
            display: flex;
            height: 220px;
        }
        
        .wish-list .wish-images {
            flex: 0 0 220px;
        }
        
        .wish-list .wish-image,
        .wish-list .no-image {
            height: 100%;
        }
        
        .wish-list .wish-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .wish-list .wish-title {
            font-size: 1.25rem;
            -webkit-line-clamp: 3;
            margin-bottom: 0.75rem;
        }
        
        .wish-list .wish-description {
            font-size: 0.95rem;
            color: var(--text-gray);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }
        
        .wish-list .wish-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .wish-list .wish-tag {
            font-size: 0.75rem;
            padding: 0.25rem 0.6rem;
            border-radius: 4px;
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 紧凑式布局特殊样式 */
        .wish-compact .wish-image,
        .wish-compact .no-image {
            height: 140px;
        }
        
        .wish-compact .wish-title {
            font-size: 0.95rem;
            -webkit-line-clamp: 2;
        }
        
        .wish-compact .wish-stats {
            font-size: 0.75rem;
            gap: 0.75rem;
        }
        
        /* 操作按钮样式 */
        .wish-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--text-gray);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            cursor: pointer;
            transition: color 0.2s;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .action-btn:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        /* 加载更多 */
        .load-more {
            margin-top: 2rem;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 8px;
            padding: 0.75rem 2rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .load-more-btn:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .wish-list .wish-card {
                height: 200px;
            }
            
            .wish-list .wish-images {
                flex: 0 0 180px;
            }
        }
        
        @media (max-width: 768px) {
            .search-container {
                max-width: 200px;
            }
            
            .wish-list .wish-card {
                flex-direction: column;
                height: auto;
            }
            
            .wish-list .wish-images {
                flex: none;
            }
            
            .wish-list .wish-image,
            .wish-list .no-image {
                height: 180px;
            }
        }
        
        @media (max-width: 576px) {
            .search-container {
                display: none;
            }
            
            .main-content {
                padding: 1rem 0;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .wish-grid {
                grid-template-columns: 1fr;
            }
            
            .wish-compact {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
        }
    </style>
</head>
<body>
    <!-- 网站头部 -->
    <header class="site-header py-3">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <a href="#" class="logo">
                    <i class="fas fa-gift"></i>
                    WishSocial
                </a>
                
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索许愿...">
                </div>
                
                <nav class="nav-links d-flex align-items-center">
                    <a href="#" class="nav-link">
                        <i class="fas fa-home"></i>
                        <span class="nav-text">首页</span>
                    </a>
                    <a href="#" class="nav-link active">
                        <i class="fas fa-star"></i>
                        <span class="nav-text">许愿推荐</span>
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-plus-circle"></i>
                        <span class="nav-text">发布许愿</span>
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-bell"></i>
                        <span class="nav-text">通知</span>
                    </a>
                    <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="avatar ms-2">
                </nav>
            </div>
        </div>
    </header>
    
    <!-- 主体内容区 -->
    <div class="main-content">
        <div class="container">
            <!-- 热门许愿区 -->
            <section class="mb-8">
                <div class="section-header">
                    <h2 class="section-title">热门许愿</h2>
                    <div class="view-options">
                        <button class="view-btn active" data-view="grid">
                            <i class="fas fa-th"></i> 卡片
                        </button>
                        <button class="view-btn" data-view="list">
                            <i class="fas fa-list"></i> 列表
                        </button>
                        <button class="view-btn" data-view="compact">
                            <i class="fas fa-th-large"></i> 紧凑
                        </button>
                    </div>
                </div>
                
                <div class="wish-container wish-grid" id="wishContainer">
                    <!-- 许愿1 - 多图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <img src="https://picsum.photos/600/400?random=10" alt="露营装备套装" class="wish-image">
                            <div class="multiple-images">
                                <i class="fas fa-images"></i> 3
                            </div>
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">户外露营装备套装 - 希望能和朋友一起去野营</h3>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=20" alt="用户头像" class="author-avatar">
                                    <span class="author-name">自然爱好者</span>
                                </div>
                                <span>3天前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>2.4k</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>42</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>328</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 许愿2 - 单图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <img src="https://picsum.photos/600/400?random=11" alt="手工吉他" class="wish-image">
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">手工木吉他 - 想学习弹奏民谣歌曲</h3>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=21" alt="用户头像" class="author-avatar">
                                    <span class="author-name">音乐梦想家</span>
                                </div>
                                <span>1周前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>1.8k</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>29</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="fas fa-heart liked"></i>
                                    <span>256</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 许愿3 - 无图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <div class="no-image">
                                <i class="fas fa-gift"></i>
                            </div>
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">专业摄影课程 - 想系统学习摄影技巧</h3>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=22" alt="用户头像" class="author-avatar">
                                    <span class="author-name">光影记录者</span>
                                </div>
                                <span>2周前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>1.2k</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>18</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>178</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="fas fa-bookmark saved"></i>
                                    <span>已收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 许愿4 - 多图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <img src="https://picsum.photos/600/400?random=12" alt="烘焙工具套装" class="wish-image">
                            <div class="multiple-images">
                                <i class="fas fa-images"></i> 5
                            </div>
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">专业烘焙工具套装 - 想学习制作蛋糕和面包</h3>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=23" alt="用户头像" class="author-avatar">
                                    <span class="author-name">甜点爱好者</span>
                                </div>
                                <span>4天前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>986</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>31</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>156</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 许愿5 - 单图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <img src="https://picsum.photos/600/400?random=13" alt="智能手表" class="wish-image">
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">智能手表 - 希望能更好地管理健康和时间</h3>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=24" alt="用户头像" class="author-avatar">
                                    <span class="author-name">健身达人</span>
                                </div>
                                <span>5天前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>3.1k</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>56</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>421</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 许愿6 - 无图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <div class="no-image">
                                <i class="fas fa-plane"></i>
                            </div>
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">周末温泉旅行 - 想放松一下工作压力</h3>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=25" alt="用户头像" class="author-avatar">
                                    <span class="author-name">职场打拼者</span>
                                </div>
                                <span>1周前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>1.5k</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>24</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="fas fa-heart liked"></i>
                                    <span>289</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                </div>
                
                <div class="load-more">
                    <button class="load-more-btn">
                        <i class="fas fa-sync-alt me-2"></i>加载更多
                    </button>
                </div>
            </section>
            
            <!-- 最新许愿区 - 列表布局默认 -->
            <section>
                <div class="section-header">
                    <h2 class="section-title">最新许愿</h2>
                </div>
                
                <div class="wish-container wish-list">
                    <!-- 最新许愿1 - 多图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <img src="https://picsum.photos/600/400?random=14" alt="瑜伽课程年卡" class="wish-image">
                            <div class="multiple-images">
                                <i class="fas fa-images"></i> 2
                            </div>
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">专业瑜伽课程年卡 - 希望能改善体态和健康状况</h3>
                            <div class="wish-description">
                                一直想系统学习瑜伽，希望能找到一家专业的瑜伽馆，有经验丰富的老师指导。希望能通过练习瑜伽改善我的颈椎问题和睡眠质量。
                            </div>
                            <div class="wish-tags">
                                <span class="wish-tag">健康</span>
                                <span class="wish-tag">运动</span>
                                <span class="wish-tag">自我提升</span>
                            </div>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=26" alt="用户头像" class="author-avatar">
                                    <span class="author-name">健康生活家</span>
                                </div>
                                <span>今天</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>342</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>8</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>56</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>点赞</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 最新许愿2 - 单图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <img src="https://picsum.photos/600/400?random=15" alt="手工皮具套装" class="wish-image">
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">手工皮具制作工具和材料套装 - 想学习制作自己的皮具</h3>
                            <div class="wish-description">
                                对皮革手工艺很感兴趣，希望能获得一套完整的手工皮具制作工具和优质皮革材料，开始学习制作钱包、皮带等小物件。
                            </div>
                            <div class="wish-tags">
                                <span class="wish-tag">手工</span>
                                <span class="wish-tag">DIY</span>
                                <span class="wish-tag">兴趣爱好</span>
                            </div>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=27" alt="用户头像" class="author-avatar">
                                    <span class="author-name">匠心手作</span>
                                </div>
                                <span>昨天</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>567</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>12</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>89</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>点赞</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 最新许愿3 - 无图 -->
                    <article class="wish-card">
                        <div class="wish-images">
                            <div class="no-image">
                                <i class="fas fa-book"></i>
                            </div>
                        </div>
                        <div class="wish-content">
                            <h3 class="wish-title">经典文学名著套装 - 想在闲暇时间充实自己</h3>
                            <div class="wish-description">
                                希望能拥有一套精装版的世界文学名著，包括托尔斯泰、狄更斯、雨果等经典作家的作品，利用业余时间提升自己的文学素养。
                            </div>
                            <div class="wish-tags">
                                <span class="wish-tag">书籍</span>
                                <span class="wish-tag">阅读</span>
                                <span class="wish-tag">自我提升</span>
                            </div>
                            <div class="wish-meta">
                                <div class="wish-author">
                                    <img src="https://picsum.photos/100/100?random=28" alt="用户头像" class="author-avatar">
                                    <span class="author-name">书香门第</span>
                                </div>
                                <span>2天前</span>
                            </div>
                            <div class="wish-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>421</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>9</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>67</span>
                                </div>
                            </div>
                            <div class="wish-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>点赞</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                        </div>
                    </article>
                </div>
                
                <div class="load-more">
                    <button class="load-more-btn">
                        <i class="fas fa-sync-alt me-2"></i>加载更多
                    </button>
                </div>
            </section>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const viewBtns = document.querySelectorAll('.view-btn');
            const wishContainer = document.getElementById('wishContainer');
            
            viewBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有按钮的活跃状态
                    viewBtns.forEach(b => b.classList.remove('active'));
                    
                    // 设置当前按钮为活跃
                    this.classList.add('active');
                    
                    // 获取要切换的布局类型
                    const viewType = this.getAttribute('data-view');
                    
                    // 移除所有布局类
                    wishContainer.classList.remove('wish-grid', 'wish-list', 'wish-compact');
                    
                    // 添加选中的布局类
                    wishContainer.classList.add(`wish-${viewType}`);
                });
            });
            
            // 点赞按钮功能
            const likeBtns = document.querySelectorAll('.like-btn');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    const countElem = this.querySelector('span');
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        // 增加点赞数
                        countElem.textContent = (parseInt(countElem.textContent) + 1).toString();
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        // 减少点赞数
                        countElem.textContent = (parseInt(countElem.textContent) - 1).toString();
                    }
                });
            });
            
            // 收藏按钮功能
            const saveBtns = document.querySelectorAll('.save-btn');
            saveBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('i');
                    const textElem = this.querySelector('span');
                    
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        textElem.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        textElem.textContent = '收藏';
                    }
                });
            });
            
            // 加载更多按钮功能
            const loadMoreBtns = document.querySelectorAll('.load-more-btn');
            loadMoreBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const originalContent = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>加载中...';
                    this.disabled = true;
                    
                    // 模拟加载延迟
                    setTimeout(() => {
                        this.innerHTML = originalContent;
                        this.disabled = false;
                        alert('已加载全部内容');
                    }, 1500);
                });
            });
        });
    </script>
</body>
</html>

